• Adding and Aligning Controls in an Absolute Layout Container
• Placing Multiple Absolute Layout Containers Inside a Tab Control
• Using Absolute Layout Containers in Responsive Design
• Using Background Images in an Absolute Layout Container
• Using Customized Radio Buttons in an Absolute Layout Container

Placing Multiple AbsoluteLayout Containers Inside a Tab Control

Description

Placing multiple AbsoluteLayout Containers inside Tab Pane containers is an easy way to break up a long documents or forms into more manageable sized parts.

Define An AbsoluteLayout Container with Controls

1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component. Give the control the name and label ''.

   

2. Add five more [TextBox] controls with the names and labels '', '', '', '', and ''.

   

3. Highlight all of the controls in the controls tree. Open the 'Containers' menu and click on the [Container] option.

   

4. From the 'Container Type' list select the 'AbsoluteLayout' option and click OK.

   

5. Highlight the opening absolute layout container tag, [AbsoluteLayout: ABSOLUTELAYOUT_1].

   

6. In the properties list on the right check the 'Has background image' checkbox in the Container Begin Properties section.

   

7. Click the [...] button next to the 'Background image' property.

   

8. Select the 'Image in Web Project or Style' radio button and click the 'Select' button. Choose the 'Select from Web Project Folder' option.

   

9. Click the "Add Image to Project" button.

   

10. Click the 'up' button next to the 'Source filename' textbox.

    

11. Set the file extension of the image you want to load, navigate to the image, and click 'Open', then OK and OK again.

    

12. With the 'AbsoluteLayout' tag still highlighted click the [...] button next to the 'Absolute positions for controls' property.

    

13. In the middle panel of the 'Set Absolute Position and Size' editor drag out the dotted line to make it the same size as the background image. This line represents the size of the layout.

    

14. Highlight the '' field in the list of fields in the left corner of the .

    

15. Place the mouse cursor in the layout editor. Hold down the left mouse button and drag the mouse right and down. A rectangle representing the size of the highlighted control will appear on the layout. Lift the left mouse button to add the control to the layout.

    

16. Add the remaining controls to the layout from the list on the left and click OK.

    

Add Two More AbsoluteLayout Containers with Controls

1. For the second AbsoluteLayout repeat the steps in the section above. Add the following [TextBox] controls, '', '', and '' to the component and use the following image a for the absolute layout's "Background image" property.

   

2. For the third AbsoluteLayout repeat the same steps. Add the following [TextBox] controls, '', '', and '' to the component and use the following image a for the absolute layout's "Background image" property.

   

Place the AbsoluteLayout Containers inside a Tab Control

1. Highlight the first 'AbsoluteLayout' container's opening tag. In the 'Containers' menu and click on the [Tab Pane] option. Name the Tab Pane 'Page 1'.

   

2. Highlight the newly defined [Tab Pane] container. Click the blue 'up up' arrow in the Controls page toolbar. This will move the control to the top of the controls tree.

   

3. Highlight the first AbsoluteLayout container's closing tag, [AbsoluteLayoutEnd:ABSOLUTELAYOUT_1]. In the 'Containers' menu click on the [Tab Pane] option again. Give the new tab pane the name 'Page 2'.

   

4. Highlight the second 'AbsoluteLayout' container's closing tag, [AbsoluteLayoutEnd:ABSOLUTELAYOUT_2]. In the 'Containers' menu click on the [Tab Pane] option again. Give the new tab pane the name 'Page 3'.

   

5. Highlight everything in the controls tree. Open the 'Containers' menu and click the [Tab Control] option.

   

6. Select the 'Tab control' radio button option and click OK.

   

7. Run the component in Live Preview. The page tabs should appear at the top of the component. Click on Page 1, Page 2, or Page 3 to open the corresponding AbsoluteLayout.

   

Set the Tab Control to Use Genie Style

The tab control can be set to move from one page to the next using 'Previous' and 'Next' buttons.

1. On the 'Design' pane open the UX Controls page. Highlight the tab control's opening tag, [Tab Control: TAB_1].

   

2. In the properties list on the right check the 'Genie style' checkbox in the 'Tab/Accordion Control Properties' section. A seperate 'Genie Properties' section will open in the control properties list. The genie properties will allow you to set how the genie will appear when the tab control is run.

   

3. Run the component in Live Preview. The tab page navigation should now be styled to use 'Cancel', Previous' and 'Next' buttons.